<template>
	<div class="AddCompany">
		<div class="loadBox"></div>
		<div class="header_ContentBox pl_10 pr_10">
			<i class="lhadmin lhadmin-enterprise Icon"></i>
			<span class="pl_10 pr_10">/</span>
			<span class="header_text">企业端 / 添加企业</span>
		</div>
		<div class="companyContentBox content_Box box-shadow mt_15">
			<el-row>
				<el-col :span="7" class="step step01">
					<div class="fl font_Box">
						<span class="fontStepF">01</span>
					</div>
					<div class="fl cont_Box">
						<div>
							<h3>基本信息</h3>
							<p>企业账号、名称、联系方式等</p>
						</div>
					</div>
				</el-col>
				<el-col :span="8" class="step step02">
					<div class="fl step hintDian1">
						<span>●</span>
						<span>●</span>
						<span>●</span>
					</div>
					<div class="fl font_Box">
						<span class="fontStepF">02</span>
					</div>
					<div class="fl cont_Box">
						<div>
							<h3>资质材料</h3>
							<p>相关证件材料、银行信息等</p>
						</div>
					</div>
				</el-col>
				<el-col :span="8" class="step step03">
					<div class="fl step hintDian2">
						<span>●</span>
						<span>●</span>
						<span>●</span>
					</div>
					<div class="fl font_Box">
						<span class="fontStepF">03</span>
					</div>
					<div class="fl cont_Box">
						<div>
							<h3>签约信息</h3>
							<p>签约日期、费率等</p>
						</div>
					</div>
				</el-col>
			</el-row>
			<div v-if="active == 1">
				<div class="headerBox">基本信息</div>
				<div class="contentInfo">
					<div class="pt_10">
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所属商户</div>
							<div class="fl list-cont">
								<el-autocomplete
									class="inline-input"
									v-model="dataMes.business_name"
									:fetch-suggestions="querySearch_s"
									placeholder="请输入"
									:trigger-on-focus="true"
									@select="handleSelect_s"
								></el-autocomplete>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺名称</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.name" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺负责人</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.contact" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>负责人手机号</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.contact_phone" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">所属行业</div>
							<div class="fl list-cont">
								<el-select v-model="dataMes.industry" disabled>
									<el-option label="餐饮" value="1"></el-option>
								</el-select>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>员工人数</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.emp_num" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">桌台数</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.number_sets" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">人均消费</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.consumption_person" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px;">元/人</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">用工高峰时段</div>
							<div class="fl list-cont">
								<el-select v-model="dataMes.time_interval">
									<el-option label="早班 [05:00-09:59]" value="1"></el-option>
									<el-option label="中班 [10:00-14:59]" value="2"></el-option>
									<el-option label="晚班 [15:00-21:59]" value="3"></el-option>
									<el-option label="夜班 [22:00-次日04:59]" value="4"></el-option>
								</el-select>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">营业时间</div>
							<div class="fl list-cont">
								<el-form label-width="100" class="demo-ruleForm fl">
									<el-form-item required style="margin-bottom: 0px;">
										<el-col :span="11">
											<el-time-select
												v-model="dataMes.start_time"
												:picker-options="{
													start: '00:00',
													step: '00:30',
													end: '24:00'
												}"
												placeholder="开始时间"
											></el-time-select>
										</el-col>
										<el-col class="line" :span="2" style="position: relative; right: -10px;">~</el-col>
										<el-col :span="11">
											<el-time-select
												v-model="dataMes.end_time"
												:picker-options="{
													start: '00:00',
													step: '00:30',
													end: '24:00'
												}"
												placeholder="开始时间"
											></el-time-select>
										</el-col>
									</el-form-item>
								</el-form>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>定位地址</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.address" disabled></el-input>
							</div>
							<i class="lhadmin lhadmin-dingwei dingwei ml_5" @click="redactBtn"></i>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>详细地址</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.detailed_address"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所在商圈</div>
							<div class="fl list-cont contentInfo2">
								<el-input v-model="dataMes.city_name" disabled></el-input>
							</div>
							<div class="fl list-cont contentInfo2">
								<el-input v-model="dataMes.area_name" disabled></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">负责人邮箱</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.email" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">公司网址</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.company_website" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>销售</div>
							<div class="fl list-cont">
								<el-autocomplete
									class="inline-input"
									v-model="dataMes.bd_name"
									:fetch-suggestions="querySearch"
									placeholder="请输入内容"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">联系电话</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes.business_phone" placeholder="请输入" disabled></el-input>
							</div>
						</div>
					</div>
					<div class="clear"></div>
					<div class="ml_120 mt_80">
						<span class="resetBtn mr_10" @click="back">返 回</span>
						<span class="btnOK" @click="addCompanyBtn">保 存 并 下 一 步</span>
					</div>
				</div>
			</div>
			<!-- 1:企业类型 -->
			<div v-if="dataMes.type == 1">
				<div v-if="active == 2">
					<div class="headerBox">资质材料</div>
					<div class="contentInfo">
						<div class="row-info clear">
							<div class="fl title-key mt_15"><i class="lhadmin lhadmin-wujiaoxing"></i>营业执照</div>
							<div class="fl list-cont">
								<!-- <upload :pic_name="'dataMes_zizhi.business_license'" @func="img1"></upload> -->
								<uploadedit
									:pic_name="'business_license'"
									:pic_url="dataMes_zizhi.business_license"
									@func="img1"
								></uploadedit>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>公司名称</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes_zizhi.company_name" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">
								营业执照注册号
							</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes_zizhi.registration_no" placeholder="请输入"></el-input>
							</div>
							<div class="fl title-key" style="width: 200px; text-align: left; margin-left: 10px;">
								（统一社会信用代码）
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">经营范围</div>
							<div class="fl list-cont">
								<el-input
									type="textarea"
									:rows="4"
									:cols="32"
									placeholder="请输入内容"
									v-model="dataMes_zizhi.business_scope"
								></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">法人姓名</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes_zizhi.name" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">法人身份证号</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes_zizhi.identity_card" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key mt_15">法人身份证</div>
							<div class="fl list-cont">
								<!-- <upload :pic_name="'dataMes_zizhi.front_pic'" @func="img2"></upload> -->
								<uploadedit :pic_name="'front_pic'" :pic_url="dataMes_zizhi.front_pic" @func="img2"></uploadedit>
							</div>
							<div class="fl list-cont ml_20">
								<!-- <upload :pic_name="'dataMes_zizhi.back_pic'" @func="img3"></upload> -->
								<uploadedit :pic_name="'back_pic'" :pic_url="dataMes_zizhi.back_pic" @func="img3"></uploadedit>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key mt_15">经营许可证</div>
							<div class="fl list-cont">
								<!-- <upload
                                    :pic_name="'dataMes_zizhi.others'"
                                    :overflow="false"
                                    @func="img4"
                                ></upload> -->
								<uploadedit :pic_name="'others'" :pic_url="dataMes_zizhi.others" @func="img4"></uploadedit>
							</div>
							<div class="fl list-cont ml_20">注：没有开户许可证的，上传银行准入开户证明</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">开户行</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes_zizhi.bank_branch_name" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key">银行账号</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes_zizhi.bank_card_id" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key mt_15">店铺Logo</div>
							<div class="fl list-cont">
								<!-- <upload :pic_name="'dataMes_zizhi.logo'" @func="img5"></upload> -->
								<uploadedit :pic_name="'logo'" :pic_url="dataMes_zizhi.logo" @func="img5"></uploadedit>
							</div>
						</div>
					</div>
					<div class="clear"></div>

					<div class="ml_120 mt_80">
						<span class="resetBtn mr_10" @click="prev">上 一 步</span>
						<span class="btnOK" @click="addCompanyBtn">保 存 并 下 一 步</span>
					</div>
				</div>
				<div v-if="active == 3">
					<div class="headerBox">结算信息</div>
					<div class="contentInfo">
						<div class="row-info clear">
							<div class="fl title-key">结算周期</div>
							<div class="fl list-cont">
								<template>
									<el-radio v-model="dataMes_qy.settlement" label="day">日</el-radio>
									<el-radio v-model="dataMes_qy.settlement" label="week">周</el-radio>
									<el-radio v-model="dataMes_qy.settlement" label="month">月</el-radio>
									<div style="float: right;" v-if="dataMes_qy.settlement == 'day'">
										说明：每天12:00自动生成前一天的账单
									</div>
									<div style="float: right;" v-if="dataMes_qy.settlement == 'week'">
										说明：每周一12:00自动确认上一周的账单
									</div>
									<div style="float: right;" v-if="dataMes_qy.settlement == 'month'">
										说明：每月1号12:00自动确认上个月的账单
									</div>
								</template>
							</div>
						</div>
					</div>
					<div class="headerBox">开票信息</div>
					<div class="contentInfo">
						<div class="pt_10">
							<div class="row-info clear">
								<div class="fl title-key">地址</div>
								<div class="fl list-cont">
									<el-input v-model="dataMes_qy.address" placeholder="请输入"></el-input>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">电话</div>
								<div class="fl list-cont">
									<el-input v-model="dataMes_qy.phone" placeholder="请输入"></el-input>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">开户行</div>
								<div class="fl list-cont">
									<el-input v-model="dataMes_qy.bank_branch_name" placeholder="请输入"></el-input>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">开户行账号</div>
								<div class="fl list-cont">
									<el-input v-model="dataMes_qy.bank_card_id" placeholder="请输入"></el-input>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">发票类型</div>
								<div class="fl list-cont">
									<el-radio-group v-model="dataMes_qy.invoice_type">
										<el-radio-button label="1">增值税普通发票</el-radio-button>
										<el-radio-button label="2">增值税专用发票</el-radio-button>
									</el-radio-group>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">可开票范围</div>
								<div class="fl list-cont">
									<template>
										<el-checkbox-group v-model="dataMes_qy.test" @change="getValue()">
											<el-checkbox v-for="(item, i) in invoiceList" :key="i" :label="item.id">{{
												item.name
											}}</el-checkbox>
										</el-checkbox-group>
									</template>
								</div>
							</div>
						</div>
						<div class="clear"></div>
						<div class="pt_10">
							<div class="headerBox">签约信息</div>

							<div class="row-info clear">
								<div class="fl title-key">签约状态</div>
								<div class="fl list-cont">
									<el-select v-model="dataMes_qy.status">
										<el-option label="已签约" value="30"></el-option>
										<el-option label="未签约" value="10"></el-option>
									</el-select>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">合同开始日期</div>
								<div class="fl list-cont">
									<el-date-picker
										type="date"
										value-format="yyyy-MM-dd"
										placeholder="合同开始日期"
										v-model="dataMes_qy.date_start"
										style="width: 100%;"
									></el-date-picker>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">合同终止日期</div>
								<div class="fl list-cont">
									<el-date-picker
										type="date"
										value-format="yyyy-MM-dd"
										placeholder="合同终止日期"
										v-model="dataMes_qy.date_end"
										style="width: 100%;"
									></el-date-picker>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">上传协议</div>
								<div class="fl list-cont mt_10">
									<!-- <uploadbig :pic_name="'dataMes_zizhi.agreement'" @func="img6"></uploadbig> -->
									<uploadbig :pic_name="'dataMes_qy.agreement'" :url="dataMes_qy.agreement" @func="img6"></uploadbig>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">备注说明</div>
								<div class="fl list-cont">
									<el-input
										type="textarea"
										:rows="8"
										:cols="44"
										placeholder="请输入内容"
										v-model="dataMes_qy.remark"
									></el-input>
								</div>
							</div>
						</div>
						<div class="clear"></div>
						<div class="ml_120 mt_80">
							<span class="resetBtn mr_10" @click="prev">上 一 步</span>
							<span class="btnOK" @click="addCompanyBtn">保 存</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 2:个人类型 -->
			<div v-if="dataMes.type == 2">
				<div v-if="active == 2">
					<div class="headerBox">资质材料</div>
					<div class="contentInfo">
						<div class="row-info clear">
							<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>身份证号码</div>
							<div class="fl list-cont">
								<el-input v-model="dataMes_zizhi.identity_card" placeholder="请输入"></el-input>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key mt_15"><i class="lhadmin lhadmin-wujiaoxing"></i>身份证</div>
							<div class="fl list-cont">
								<!-- <upload :pic_name="'dataMes_zizhi.front_pic'" @func="img2"></upload> -->
								<uploadedit :pic_name="'front_pic'" :pic_url="dataMes_zizhi.front_pic" @func="img2"></uploadedit>
							</div>
							<div class="fl list-cont ml_20">
								<!-- <upload :pic_name="'dataMes_zizhi.back_pic'" @func="img3"></upload> -->
								<uploadedit :pic_name="'back_pic'" :pic_url="dataMes_zizhi.back_pic" @func="img3"></uploadedit>
							</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key mt_15">其他</div>
							<div class="fl list-cont">
								<!-- <upload
                                    :pic_name="'dataMes_zizhi.others'"
                                    :overflow="false"
                                    @func="img4"
                                ></upload> -->
								<uploadedit :pic_name="'others'" :pic_url="dataMes_zizhi.others" @func="img4"></uploadedit>
							</div>
							<div class="fl list-cont ml_20">（可上传所持有的行业经营许可证件图片，如：餐饮行业个体户健康证）</div>
						</div>
						<div class="row-info clear">
							<div class="fl title-key mt_15">店铺Logo</div>
							<div class="fl list-cont">
								<upload :pic_name="'dataMes_zizhi.logo'" @func="img5"></upload>
							</div>
						</div>
					</div>
					<div class="clear"></div>

					<div class="ml_120 mt_80">
						<span class="resetBtn mr_10" @click="prev">上 一 步</span>
						<span class="btnOK" @click="addCompanyBtn">保 存 并 下 一 步</span>
					</div>
				</div>
				<div v-if="active == 3">
					<div class="headerBox">结算信息</div>
					<div class="contentInfo">
						<div class="row-info clear">
							<div class="fl title-key">结算周期</div>
							<div class="fl list-cont">
								<template>
									<el-radio v-model="dataMes_qy.settlement" label="day">日</el-radio>
									<el-radio v-model="dataMes_qy.settlement" label="week">周</el-radio>
									<el-radio v-model="dataMes_qy.settlement" label="month">月</el-radio>
									<div style="float: right;" v-if="dataMes_qy.settlement == 'day'">
										说明：每天12:00自动生成前一天的账单
									</div>
									<div style="float: right;" v-if="dataMes_qy.settlement == 'week'">
										说明：每周一12:00自动确认上一周的账单
									</div>
									<div style="float: right;" v-if="dataMes_qy.settlement == 'month'">
										说明：每月1号12:00自动确认上个月的账单
									</div>
								</template>
							</div>
						</div>
					</div>
					<div class="headerBox">开票信息</div>
					<div class="contentInfo">
						<div class="pt_10">
							<div class="row-info clear">
								<div class="fl title-key">地址</div>
								<div class="fl list-cont">
									<el-input v-model="dataMes_qy.address" placeholder="请输入"></el-input>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">电话</div>
								<div class="fl list-cont">
									<el-input v-model="dataMes_qy.phone" placeholder="请输入"></el-input>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">发票类型</div>
								<div class="fl list-cont">
									<el-radio-group v-model="dataMes_qy.invoice_type">
										<el-radio-button label="1">增值税普通发票</el-radio-button>
										<el-radio-button label="2">增值税专用发票</el-radio-button>
									</el-radio-group>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">可开票范围</div>
								<div class="fl list-cont">
									<template>
										<el-checkbox-group v-model="dataMes_qy.test" @change="getValue()">
											<el-checkbox v-for="(item, i) in invoiceList" :key="i" :label="item.id">{{
												item.name
											}}</el-checkbox>
										</el-checkbox-group>
									</template>
								</div>
							</div>
						</div>
						<div class="clear"></div>
						<div class="pt_10">
							<div class="headerBox">签约信息</div>
							<div class="row-info clear">
								<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>签约状态</div>
								<div class="fl list-cont">
									<el-select v-model="dataMes_qy.status">
										<el-option label="已签约" value="30"></el-option>
										<el-option label="未签约" value="10"></el-option>
									</el-select>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">合同开始日期</div>
								<div class="fl list-cont">
									<el-date-picker
										type="date"
										value-format="yyyy-MM-dd"
										placeholder="合同开始日期"
										v-model="dataMes_qy.date_start"
										style="width: 100%;"
									></el-date-picker>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">合同终止日期</div>
								<div class="fl list-cont">
									<el-date-picker
										type="date"
										value-format="yyyy-MM-dd"
										placeholder="合同终止日期"
										v-model="dataMes_qy.date_end"
										style="width: 100%;"
									></el-date-picker>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">上传协议</div>
								<div class="fl list-cont mt_10">
									<!-- <uploadbig :pic_name="'dataMes_zizhi.agreement'" @func="img6"></uploadbig> -->
									<uploadbig :pic_name="'dataMes_qy.agreement'" :url="dataMes_qy.agreement" @func="img6"></uploadbig>
								</div>
							</div>
							<div class="row-info clear">
								<div class="fl title-key">备注说明</div>
								<div class="fl list-cont">
									<el-input
										type="textarea"
										:rows="8"
										:cols="44"
										placeholder="请输入内容"
										v-model="dataMes_qy.remark"
									></el-input>
								</div>
							</div>
						</div>
						<div class="clear"></div>
						<div class="ml_120 mt_80">
							<span class="resetBtn mr_10" @click="prev">上 一 步</span>
							<span class="btnOK" @click="addCompanyBtn">保 存</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹出地图 -->
		<!-- 详细地址 -->
		<el-dialog
			title="详细地址"
			:visible.sync="readctRoleShow"
			width="1000px"
			:before-close="close"
			:close-on-click-modal="false"
		>
			<div class="auditCentent">
				<div class="clear">
					<div class="mb_10 roleFunctionBox">
						<div class="pl_10 pb_10">
							<!-- 区域画图 -->
							<!-- <maparea @func="getMsgFormSon" ref="mychildarea" v-if="readctRoleShow"></maparea> -->
							<!-- <areapicking v-if="readctRoleShow" @pagedata="onChildValue"></areapicking> -->
							<areapickings
								v-if="readctRoleShow"
								@pagedata="onChildValue"
								:inputs="dataMes.name"
								:lngs="lng"
								:lats="lat"
								:areas="dataMes.address"
							></areapickings>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { publicData } from '../../../assets/js/data.js'
export default {
	name: 'AddCompany',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			url: common.url,
			readctRoleShow: false, //区域框架的显示隐藏
			active: 1, //步骤
			//相关数据
			dataMes: {
				// 第一页的数据
				type: '', //商铺类型
				business_sn: '', //唯一的code
				business_id: '', //所属商户
				business_name: '', //所属商户name
				name: '', //店铺名称
				contact: '', //店铺负责人
				contact_phone: '', //店铺负责人手机号
				industry: '1', //所属行业 [1]餐饮
				emp_num: '', //员工人数
				number_sets: '', //桌台数
				consumption_person: '', //人均消费
				time_interval: '', //高峰时段 1、2、3、4早、中、晚、夜
				start_time: '', //营业时间-开始
				end_time: '', //营业时间-结束
				address: '', //地址
				detailed_address: '', //地址
				city_id: '', //城市ID
				city_name: '', //城市
				area_id: '', //区域id
				area_name: '', //区域
				email: '', //负责人邮箱
				company_website: '', //网址
				bd_name: '', //销售
				bd_userid: '', //销售ID
				bd_phone: '', //销售手机
				business_phone: '', //联系电话
				coordinates_list: {} //新增的位置坐标
			},
			dataMes_zizhi: {
				// 第二页的数据
				id: '', //对应的商铺id
				// type同上
				company_name: '', //公司名
				business_license: '', //营业执照
				registration_no: '', //信用代码
				business_scope: '', //经营范围
				name: '', //法人
				bank_branch_name: '', //开户行
				bank_card_id: '', //卡号
				identity_card: '', //身份证号码
				front_pic: '', //身份证正面
				back_pic: '', //身份证反面
				logo: '', //logo
				others: [] //其他资质多个用[,]拼接
			},
			dataMes_qy: {
				// 第三页的数据
				// id同上
				// type同上
				settlement: 'week', //结算周期
				address: '', //地址
				phone: '', //电话
				invoice_type: '', //[1]普通 [2]专用
				test: [],
				scope: '', //开票范围多个[,]拼接
				bank_branch_name: '', //开户行
				bank_card_id: '', //卡号
				status: '', //10、已注册 20、申请签约 30签约成功 40签约失败 50 到期
				date_start: '', //开始时间
				date_end: '', //结束时间
				agreement: '', //协议PDF文件
				remark: '' //备注
			},
			signRateArr: [
				{
					start: '0',
					end: 'max',
					rate: ''
				}
			], // max最后一个传  签约费率区间
			MerchantsList: [], //商户列表
			BusinessUserList: [], //销售列表
			cityList: [], //城市列表
			invoiceList: [], //发票类目
			city_arr: '',
			lng: '', //经度
			lat: '' //纬度
		}
	},
	created() {
		//移除本地相关sessionStorage
		sessionStorage.removeItem('insert_id')
		//商户参数传入判断，接收
		if (this.$route.query.business_id) {
			this.dataMes.business_id = Number(this.$route.query.business_id)
			this.dataMes.business_sn = this.$route.query.business_sn
			this.dataMes.business_name = this.$route.query.business_name
			this.dataMes.type = this.$route.query.business_type
		}
	},
	mounted() {
		this.verifyActive()
		this.getMerchants() //商户列表
		this.getBusinessUser() //销售列表
		this.getcityList() //城市列表
		this.getinvoiceList() //发票类目
	},
	methods: {
		//获取商户列表
		getMerchants() {
			let fn = new FormData()
			fn.append('status', 1)
			this.$http.post(this.url + '/business/list', fn).then(
				res => {
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data.list != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.MerchantsList = res.data.data.list
						} else {
							this.MerchantsList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取销售列表
		getBusinessUser() {
			let fn = new FormData()
			this.$http.post(this.url + '/manageUser/getBusinessUser', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.forEach(item => {
								item.value = item.nickname
							})
							this.BusinessUserList = res.data.data
						} else {
							this.BusinessUserList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		getcityList() {
			//获取城市列表
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		getinvoiceList() {
			//获取发票类目
			let fn = new FormData()
			this.$http.post(this.url + '/common/invoiceList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.invoiceList = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		cutInterval(index) {
			//删除区间
			if (this.signRateArr.length == 1) {
				this.$message({
					message: '至少保留一个区间',
					type: 'warning'
				})
				return
			}
			this.signRateArr.pop()
			this.signRateArr[this.signRateArr.length - 1].end = 'max'
		},

		addInterval(index) {
			//添加区间
			this.signRateArr[index].end = ''
			this.signRateArr.push({
				start: '',
				end: 'max',
				rate: ''
			})
		},

		//子组件过来的值
		onChildValue(item) {
			// this.pageNum = item[0];
			// this.pageSizeNow = item[1];
			console.log(item)

			this.lng = item[0]
			this.lat = item[1]
			// this.area = item[2];
			this.dataMes.address = item[2]
			//根据经纬度获取商圈
			let fn = new FormData()
			fn.append('lng', this.lng)
			fn.append('lat', this.lat)
			fn.append('source', 'shop')
			this.$http.post(this.url + '/area/getArea', fn).then(
				res => {
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						console.log(res.data.data)

						this.dataMes.city_id = res.data.data.city_id
						this.dataMes.city_name = res.data.data.city_name
						this.dataMes.area_id = res.data.data.id
						this.dataMes.area_name = res.data.data.area_name
						this.dataMes.coordinates_list = res.data.data.coordinates_list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
			this.close()
		},

		redactBtn(row) {
			//编辑
			this.readctRoleShow = true //显示区域框
		},

		close() {
			this.readctRoleShow = false //隐藏区域框
		},

		inputChange(index, val) {
			//输入区间比例值得时候
			this.signRateArr[index + 1].start = val
		},
		verifyActive() {
			// 步骤条判断
			if (this.active == 1) {
				$('.step01').addClass('stepRed')
				$('.step01').removeClass('stepGreen')
				$('.step02').removeClass('stepRed')
				$('.step02').removeClass('stepGreen')
				$('.step03').removeClass('stepRed')
				$('.step03').removeClass('stepGreen')
				$('.hintDian1').removeClass('stepBlack')
				$('.hintDian2').removeClass('stepBlack')
			} else if (this.active == 2) {
				$('.step01').removeClass('stepRed')
				$('.step01').addClass('stepGreen')
				$('.step02').removeClass('stepGreen')
				$('.step02').addClass('stepRed')
				$('.step03').removeClass('stepRed')
				$('.step03').removeClass('stepGreen')
				$('.hintDian1').addClass('stepBlack')
				$('.hintDian2').removeClass('stepBlack')
			} else if (this.active == 3) {
				$('.step01').addClass('stepGreen')
				$('.step02').addClass('stepGreen')
				$('.step03').addClass('stepRed')
				$('.hintDian1').addClass('stepBlack')
				$('.hintDian2').addClass('stepBlack')
			}
		},
		backInfo() {
			this.active = 1
			this.verifyActive()
		},
		addCompanyBtn() {
			//提交表单数据
			if (this.active == 1) {
				// 第一步的保存提交
				if (
					this.dataMes.business_name == '' || //所属商户
					this.dataMes.name == '' || //店铺名称
					this.dataMes.contact == '' || //店铺负责人
					this.dataMes.contact_phone == '' || //负责人手机号
					this.dataMes.emp_num == '' || //员工人数
					this.dataMes.address == '' || //地址
					this.dataMes.detailed_address == '' //地址
				) {
					this.$message.error('请填写必填项')
					return
				}
				if (
					this.dataMes.city_name == undefined || //城市
					this.dataMes.area_name == undefined //商圈
				) {
					this.$message.error('所在商圈信息不能为空！')
					return
				}
				//判断销售是否存在 this.dataMes.bd_name
				var existence = false //默认不存在
				this.BusinessUserList.forEach(item => {
					if (this.dataMes.bd_name == item.nickname) {
						existence = true
					}
				})
				if (existence == false) {
					this.$message.error('请选择正确的销售')
					return
				}

				// 第一步的提交
				//判断本地是否存在insert_id
				let insert_id = window.sessionStorage.getItem('insert_id')
				if (insert_id == null) {
					// 新增的方法
					this.first()
				} else {
					// 修改的方法
					this.firstedit(insert_id)
				}
				console.log(insert_id)
			} else if (this.active == 2) {
				// 第二步的保存提交
				if (this.dataMes.type == 1) {
					//企业
					if (
						this.dataMes_zizhi.business_license == '' || //营业执照
						this.dataMes_zizhi.company_name == '' //公司名称
						// this.dataMes_zizhi.registration_no == "" || //营业执照注册号
						// this.dataMes_zizhi.logo == "" //logo
					) {
						this.$message.error('请填写必填项')
						return
					}
				} else {
					//个人
					if (
						this.dataMes_zizhi.identity_card == '' || //身份证号码
						this.dataMes_zizhi.front_pic == '' || //身份证正面
						this.dataMes_zizhi.back_pic == '' //身份证反面
						// this.dataMes_zizhi.logo == "" //logo
					) {
						this.$message.error('请填写必填项')
						return
					}
				}

				// 第二步的提交
				this.two()
			} else if (this.active == 3) {
				// 第三步的保存提交
				this.three()
			}
		},
		prev() {
			//上一页
			if (this.active > 0) {
				this.active -= 1
			}
		},
		first() {
			let fn = new FormData()
			fn.append('type', this.dataMes.type)
			fn.append('business_id', this.dataMes.business_id)
			fn.append('business_sn', this.dataMes.business_sn)
			fn.append('name', this.dataMes.name)
			fn.append('contact', this.dataMes.contact)
			fn.append('contact_phone', this.dataMes.contact_phone)
			fn.append('industry', this.dataMes.industry)
			fn.append('emp_num', this.dataMes.emp_num)
			fn.append('number_sets', this.dataMes.number_sets)
			fn.append('consumption_person', this.dataMes.consumption_person)
			fn.append('time_interval', this.dataMes.time_interval)
			fn.append('start_time', this.dataMes.start_time)
			fn.append('end_time', this.dataMes.end_time)
			fn.append('address', this.dataMes.address)
			fn.append('detailed_address', this.dataMes.detailed_address)
			fn.append('city_id', this.dataMes.city_id)
			fn.append('city_name', this.dataMes.city_name)
			fn.append('area_id', this.dataMes.area_id)
			fn.append('area_name', this.dataMes.area_name)
			fn.append('email', this.dataMes.email)
			fn.append('company_website', this.dataMes.company_website)
			// fn.append("bd_name", this.dataMes.bd_name);
			// fn.append("bd_userid", this.dataMes.bd_userid);
			fn.append('business_director', this.dataMes.bd_name)
			fn.append('business_director_id', this.dataMes.bd_userid)
			fn.append('bd_phone', this.dataMes.bd_phone)
			fn.append('business_phone', this.dataMes.business_phone)
			// fn.append("location", this.dataMes.coordinates_list);
			// fn.append("location", JSON.stringify(this.dataMes.coordinates_list));
			fn.append('lng', this.lng)
			fn.append('lat', this.lat)

			fn.append('form', 'shop')

			this.$http.post(this.url + '/shop/addBasic', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '请求成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						//设置返回的id
						this.dataMes_zizhi.id = res.data.data.id
						// this.dataMes_zizhi.id = 65;
						// 本地保存
						sessionStorage.setItem('insert_id', JSON.stringify(res.data.data.id))
						if (this.active <= 2) {
							this.active += 1
						}
						this.returnBtn() //返回顶部
						this.verifyActive()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		two() {
			let fn = new FormData()
			fn.append('id', this.dataMes_zizhi.id)
			fn.append('type', this.dataMes.type)
			fn.append('company_name', this.dataMes_zizhi.company_name)
			fn.append('business_license', this.dataMes_zizhi.business_license)
			fn.append('registration_no', this.dataMes_zizhi.registration_no)
			fn.append('business_scope', this.dataMes_zizhi.business_scope)
			fn.append('name', this.dataMes_zizhi.name)
			fn.append('bank_branch_name', this.dataMes_zizhi.bank_branch_name)
			fn.append('bank_card_id', this.dataMes_zizhi.bank_card_id)
			fn.append('identity_card', this.dataMes_zizhi.identity_card)
			fn.append('front_pic', this.dataMes_zizhi.front_pic)
			fn.append('back_pic', this.dataMes_zizhi.back_pic)
			fn.append('logo', this.dataMes_zizhi.logo)
			// others进行格式转化
			var others = this.dataMes_zizhi.others.toString()
			fn.append('others', others)
			this.$http.post(this.url + '/shop/addQualification', fn).then(
				res => {
					console.log(res)
					if (res.data.msg == '请求成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						if (this.active <= 2) {
							this.active += 1
						}
						this.returnBtn() //返回顶部
						this.verifyActive()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		three() {
			let fn = new FormData()
			fn.append('id', this.dataMes_zizhi.id)
			fn.append('type', this.dataMes.type)
			fn.append('settlement_cycle', this.dataMes_qy.settlement)
			fn.append('address', this.dataMes_qy.address)
			fn.append('phone', this.dataMes_qy.phone)
			fn.append('invoice_type', this.dataMes_qy.invoice_type)
			fn.append('scope', this.dataMes_qy.test.toString())
			fn.append('bank_branch_name', this.dataMes_qy.bank_branch_name)
			fn.append('bank_card_id', this.dataMes_qy.bank_card_id)
			fn.append('status', this.dataMes_qy.status)
			fn.append('date_start', this.dataMes_qy.date_start)
			fn.append('date_end', this.dataMes_qy.date_end)
			fn.append('agreement', this.dataMes_qy.agreement)
			fn.append('remark', this.dataMes_qy.remark)
			this.$http.post(this.url + '/shop/addSign', fn).then(
				res => {
					console.log(res)
					if (res.data.msg == '操作成功' || res.data.code == '200') {
						sessionStorage.removeItem('insert_id')
						this.$message.success(res.data.msg)
						//跳转回上一页
						this.back()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		firstedit(id) {
			let fn = new FormData()
			fn.append('id', id)
			// fn.append("type", this.dataMes.type);
			// fn.append("business_id", this.dataMes.business_id);
			// // fn.append("business_sn", this.dataMes.business_sn);
			// fn.append("name", this.dataMes.name);
			// fn.append("contact", this.dataMes.contact);
			// fn.append("contact_phone", this.dataMes.contact_phone);
			// fn.append("industry", this.dataMes.industry);
			// fn.append("number_sets", this.dataMes.number_sets);
			// fn.append("consumption_person", this.dataMes.consumption_person);
			// fn.append("time_interval", this.dataMes.time_interval);
			// fn.append("start_time", this.dataMes.start_time);
			// fn.append("end_time", this.dataMes.end_time);
			// fn.append("address", this.dataMes.address);
			// fn.append("city_id", this.dataMes.city_id);
			// fn.append("city_name", this.dataMes.city_name);
			// fn.append("email", this.dataMes.email);
			// fn.append("company_website", this.dataMes.company_website);
			// fn.append("business_director", this.dataMes.bd_name);
			// fn.append("business_director_id", this.dataMes.bd_userid);
			// fn.append("bd_phone", this.dataMes.bd_phone);
			// fn.append("business_phone", this.dataMes.business_phone);
			// // fn.append("location", this.dataMes.coordinates_list);
			// // fn.append("location", JSON.stringify(this.dataMes.coordinates_list));
			// // console.log(this.dataMes.coordinates_list);
			// // return;
			// fn.append("lng", this.lng);
			// fn.append("lat", this.lat);
			fn.append('type', this.dataMes.type)
			fn.append('business_id', this.dataMes.business_id)
			fn.append('business_sn', this.dataMes.business_sn)
			fn.append('name', this.dataMes.name)
			fn.append('contact', this.dataMes.contact)
			fn.append('contact_phone', this.dataMes.contact_phone)
			fn.append('industry', this.dataMes.industry)
			fn.append('emp_num', this.dataMes.emp_num)
			fn.append('number_sets', this.dataMes.number_sets)
			fn.append('consumption_person', this.dataMes.consumption_person)
			fn.append('time_interval', this.dataMes.time_interval)
			fn.append('start_time', this.dataMes.start_time)
			fn.append('end_time', this.dataMes.end_time)
			fn.append('address', this.dataMes.address)
			fn.append('detailed_address', this.dataMes.detailed_address)
			fn.append('city_id', this.dataMes.city_id)
			fn.append('city_name', this.dataMes.city_name)
			fn.append('area_id', this.dataMes.area_id)
			fn.append('area_name', this.dataMes.area_name)
			fn.append('email', this.dataMes.email)
			fn.append('company_website', this.dataMes.company_website)
			// fn.append("bd_name", this.dataMes.bd_name);
			// fn.append("bd_userid", this.dataMes.bd_userid);
			fn.append('business_director', this.dataMes.bd_name)
			fn.append('business_director_id', this.dataMes.bd_userid)
			fn.append('bd_phone', this.dataMes.bd_phone)
			fn.append('business_phone', this.dataMes.business_phone)
			// fn.append("location", this.dataMes.coordinates_list);
			// fn.append("location", JSON.stringify(this.dataMes.coordinates_list));
			fn.append('lng', this.lng)
			fn.append('lat', this.lat)

			fn.append('form', 'shop')

			this.$http.post(this.url + '/shop/addBasic', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '请求成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						if (this.active <= 2) {
							this.active += 1
						}
						this.returnBtn() //返回顶部
						this.verifyActive()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		returnBtn() {
			//回到顶部
			$('html,body').animate({ scrollTop: 0 }, 5)
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		getValue() {
			console.log(this.dataMes_qy.test)
		},
		//自动完成=商户列表
		querySearch_s(queryString, cb) {
			var restaurants = this.MerchantsList
			var results = queryString ? restaurants.filter(this.createFilter_s(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter_s(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect_s(item) {
			console.log(item)
			this.dataMes.type = item.type
			this.dataMes.business_name = item.name
			this.dataMes.business_id = item.id
			this.dataMes.business_sn = item.business_sn
		},
		//自动完成=销售
		querySearch(queryString, cb) {
			var restaurants = this.BusinessUserList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.dataMes.bd_name = item.nickname
			this.dataMes.bd_userid = item.user_id
			this.dataMes.business_phone = item.mobile
		},
		changeBtndialog() {
			let [id, name] = this.city_arr.split('|') // es6 数组解构赋值
			this.dataMes.city_id = id.toString()
			this.dataMes.city_name = name.toString()
		},
		img1(data) {
			// console.log(data);
			this.dataMes_zizhi.business_license = data
		},
		img2(data) {
			// console.log(data);
			this.dataMes_zizhi.front_pic = data
		},
		img3(data) {
			// console.log(data);
			this.dataMes_zizhi.back_pic = data
		},
		img4(data) {
			// this.dataMes_zizhi.others = data;
			this.dataMes_zizhi.others.push(data)
		},
		img5(data) {
			// console.log(data);
			this.dataMes_zizhi.logo = data
		},
		img6(data) {
			this.dataMes_qy.agreement = data
		}
	}
}
</script>

<style scoped>
.AddCompany {
	margin: 15px 15px 0 15px;
}
.headerBox {
	height: 35px;
	line-height: 35px;
	font-size: 14px;
	padding-left: 10px;
	border-bottom: 1px solid #e8e8e8;
	color: var(--purple4);
	margin-bottom: 15px;
}
.searchLine {
	height: 60px;
}
.contentInfo {
	padding: 10px;
}
.contentInfo ul li {
	min-height: 50px;
	line-height: 50px;
	margin: 5px 0;
}
.ivoniceListBox > span {
	color: #666666;
	font-size: 14px;
	text-align: right;
	display: inline-block;
	width: 140px;
}
.contentInfo ul li > span {
	float: left;
	color: #666666;
	font-size: 12px;
	text-align: right;
	display: inline-block;
	width: 140px;
}
.contentInfo ul li p {
	float: left;
	padding-left: 10px;
	color: #333333;
	font-size: 16px;
	display: inline-block;
}
.contentInfo ul li.addr {
	min-height: 120px;
}
.fontStepF {
	font-family: 'Impact', sans-serif;
	font-weight: 900;
	font-style: normal;
	margin-right: 5px;
	font-size: 60px;
}
.submitBox {
	margin: 30px 0 0 150px;
	height: 50px;
}
.submitBox .btnOK {
	padding: 0 40px;
}
.contentInfo .hintSelect {
	color: #999999;
	font-size: 12px;
	letter-spacing: 1px;
}
.upLodeImgBox {
	/* height: 150px; */
	min-height: 140px !important;
}
.upLodeImgBox img {
	padding: 4px;
	border: 2px solid #cccccc;
	height: 90px;
}
.uploaderBtn {
	width: 300px;
	height: 30px;
	line-height: 30px;
	background: var(--gray);
	color: #ffffff;
	border-radius: 15px;
}
.dingwei {
	font-size: 26px;
	color: var(--btn);
}
.avatar {
	ght: 110px;
	vertical-align: text-top;
}
.step {
	color: #999999;
}
.stepRed {
	color: var(--red3);
}
.stepGreen {
	color: var(--green);
}
.stepBlack {
	color: var(--black);
}
.step01 .font_Box {
	width: 30%;
	text-align: right;
}
.step02 .font_Box,
.step03 .font_Box {
	width: 20%;
	text-align: right;
}
.step01 .cont_Box {
	width: 70%;
}
.step02 .cont_Box,
.step03 .cont_Box {
	width: 50%;
}
.cont_Box > div {
	padding: 10px 0 10px 5px;
}
.cont_Box h3 {
	line-height: 36px;
}
.cont_Box p {
	font-size: 13px;
}
.step .hintDian1,
.step .hintDian2 {
	width: 30%; /* text-align: center; */
	line-height: 90px;
}
.hintDian1 span:nth-child(1),
.hintDian1 span:nth-child(3),
.hintDian2 span:nth-child(1),
.hintDian2 span:nth-child(3) {
	font-size: 14px;
}
.hintDian1 span:nth-child(2),
.hintDian2 span:nth-child(2) {
	font-size: 20px;
	position: relative;
	top: 2px;
}
.row-info {
	padding: 10px 0;
}
.title-key {
	width: 108px;
}
/* 步骤一 */
.stepOne {
	play: -webkit-flex;
	display: flex;
	-webkit-justify-content: left;
	justify-content: left;
}
.stepThree {
	background-color: #ffffff;
	border-radius: 5px;
	margin-top: 15px;
}
@media (max-width: 767.78px) {
	.contentInfo ul li > span {
		width: 80px !important;
		font-size: 10px !important;
	}
	.contentInfo .hintSelect {
		display: none !important;
	}
	.contentInfo ul li p {
		font-size: 14px;
	}
	.ivoniceListBox > span {
		width: 80px !important;
		font-size: 10px !important;
	}
	.companyPopulation {
		width: 200px;
	}
	.uploaderBtn {
		th: 200px;
	}
}

@media (max-width: 1200.78px) {
	.fontStepF {
		font-size: 40px;
	}
	.cont_Box > div {
		padding: 0;
	}
	.cont_Box h3 {
		line-height: 30px;
		font-size: 15px;
	}
	.cont_Box p {
		font-size: 12px;
	}
	.step .hintDian1,
	.step .hintDian2 {
		line-height: 50px;
	}
	.step_BOX {
		height: 60px;
	}
}

/* 上传 */
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopAdd.vue